// 历史上的今天
import { getTasksHistory } from '../api.js';

export default {
    //components:{ TaskButton },

    data() {
        return {
            tasks: []
        };
    },

    methods: {
        async fetchTaskHistory() {
            // 使用 Axios 获取任务
            axios.get( getTasksHistory() )
                .then(response => {
                    this.tasks = response.data;
                    //console.log(">> >>", this.tasks)
                })
                .catch(error => {
                    console.error('Error fetching tasks:', error);
                });
        },

    },

    mounted() {
        this.fetchTaskHistory();
    },

	//props:['caption'],
    //<li><a :href="'/tasks/'+task.task_id">{{ task.title }}</a></li>
	template:`
    <div class="container">

        <h2>History of The Following Days in the Last {{tasks.n_years}} Year(s)</h2>


        <div class="box2">
            <h2>History of tasks_today</h2>
            <ul class="info">
                <template v-for="(task, key) in tasks.tasks_today">
                <li>
                    <span>{{task.due_date}}</span>
                    <span class="grey">[id:{{task.task_id}}]</span>
                    <span :class="'priority priority_'+task.priority">{{task.priority}}</span>
                    
                    <a :href="'#/tasks/'+task.task_id">{{ task.title }}</a>
                </li>
                </template>
            </ul>
        </div>

        <div class="box2">
            <h2>History of tasks_next_week</h2>
            <ul class="info">
                <template v-for="(task, key) in tasks.tasks_next_week">
                <li>
                    <span>{{task.due_date}}</span>
                    <span class="grey">[id:{{task.task_id}}]</span>
                    <span :class="'priority priority_'+task.priority">{{task.priority}}</span>
                    
                    <a :href="'#/tasks/'+task.task_id">{{ task.title }}</a>
                </li>
                </template>
            </ul>
        </div>


        <div class="box2">
            <h2>History of tasks_next_month</h2>
            <ul class="info">
                <template v-for="(task, key) in tasks.tasks_next_month">
                <li>
                    <span>{{task.due_date}}</span>
                    <span class="grey">[id:{{task.task_id}}]</span>
                    <span :class="'priority priority_'+task.priority">{{task.priority}}</span>
                    
                    <a :href="'#/tasks/'+task.task_id">{{ task.title }}</a>
                </li>
                </template>
            </ul>
        </div>


    </div>`
}
            
/*
<ul>
    <template v-for="(value, key) in task">
    <li>{{key}}: {{value}}</li>
    </template>

    <span>[task_id: {{task.task_id}}]</span>
    <span>due_date: {{task.due_date}}</span>
</ul>
*/